<template>
  <div class="indexmainnav">
    <div class="left">
      <i :class="['iconfont',indexmainnav.cla]"></i>
      <strong>{{indexmainnav.zi}}</strong>
      <span>{{indexmainnav.zimu}}</span>
    </div>
    <div class="daojishi">
      <div v-if="indexmainnav.zi=='礼拜五'" class="kaishizi">
        <span v-if="time">倒计时</span>
        <span v-else>距离开始</span>
      </div>
      <div v-if="indexmainnav.zi=='礼拜五'" class="daojishitime">
        <span>
          <span>{{days}}</span>天
        </span>
        <span>{{hours}}</span> :
        <span>{{minutes}}</span> :
        <span>{{seconds}}</span>
      </div>
      <router-link v-if="indexmainnav.zi=='礼拜五'" to="/index">更多 ></router-link>
      <router-link v-else to="/index">更多 ></router-link>
    </div>
  </div>
</template>

<script>
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      days: "",
      hours: "",
      minutes: "",
      seconds: "",
      time: false
    };
  },
  props: ["indexmainnav"],
  components: {},
  mounted() {
    if (this.indexmainnav.zi == "礼拜五") {
      var _this = this;
      let d = new Date();
      //设置时间为00:00:00
      d.setHours(0, 0, 0, 0);
      //获得今天与星期五的日差
      var week;
      if (d.getDay() == 5) {
        _this.time = true;
        week = 1;
      } else {
        week = 5 - (d.getDay() < 5 ? d.getDay() : d.getDay() == 7 ? 0 : -1);
      }
      var result = d.getTime() + week * 86400000;
      //今天00:00:00的时间戳 加上今天与周五的日差秒数得到结果时间戳
      result = d.getTime() + week * 86400000;
      setInterval(function() {
        //获得今天日期时间
        var todaytime = new Date();
        var today = Date.parse(todaytime);
        var seconds = (result - today) / 1000;
        var days = Math.floor(seconds / (3600 * 24));
        seconds = seconds % (3600 * 24);
        var hours = Math.floor(seconds / 3600);
        seconds = seconds % 3600;
        var minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        _this.days = days;
        _this.hours = hours;
        _this.minutes = minutes;
        _this.seconds = seconds;
        if (todaytime.getDay() == 5) {
          _this.time = true;
        }
      }, 1000);
    }
  },
  watch: {
    time(e) {
      if (e) {
        alert("活动开始");
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.indexmainnav {
  display: flex;
  justify-content: space-between;
  background-color: #ebffe8;
  padding: 1rem;
  border-bottom: 1px solid #498e3d;
}
.indexmainnav strong {
  color: #498e3d;
  font-size: 2rem;
  font-weight: 500;
  padding: 0px 1rem;
}
.indexmainnav .left {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* width: 26%; */
}
.indexmainnav .left .iconfont {
  font-size: 2.5rem;
}
.indexmainnav strong + span {
  font-size: 1.2rem;
  color: #999;
}
.daojishi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.daojishi a {
  text-decoration: none;
  padding-left: 1rem;
}
.daojishitime {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.daojishitime > span {
  line-height: 2rem;
  text-align: center;
  width: 3rem;
  margin: 0px 0.4rem;
  border-radius: 0.2rem;
  background-color: #f08200;
}
.kaishizi {
  color: #498e3d;
  padding-right: 1rem;
}
</style>
